<template>
  <div class="weighing-inquiry">
    <!-- 顶部导航栏 -->
    <div class="nav-header">
      <van-icon name="arrow-left" size="20" @click="goBack" />
      <h2>磅单查询</h2>
      <div class="placeholder"></div>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-section">
      <van-search
        v-model="searchKeyword"
        placeholder="车号"
        @search="handleSearch"
        @clear="handleClear"
        shape="round"
        background="transparent"
        class="search-input"
      />
    </div>

    <!-- 查询结果区域 -->
    <div class="results-container">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <van-loading size="24" color="#667eea">查询中...</van-loading>
      </div>
      
      <!-- 空状态 -->
      <div v-else-if="!hasSearched && weighingRecords.length === 0" class="empty-state">
        <van-icon name="search" size="48" color="#c8c9cc" />
        <p>请输入车号查询磅单信息</p>
      </div>
      
      <!-- 无结果状态 -->
      <div v-else-if="hasSearched && weighingRecords.length === 0" class="no-results">
        <van-icon name="warning-o" size="48" color="#c8c9cc" />
        <p>未找到相关磅单记录</p>
        <p class="tip">请检查车号是否正确</p>
      </div>
      
      <!-- 查询结果列表 -->
      <div v-else class="results-list">
        <div 
          v-for="record in weighingRecords" 
          :key="record.id"
          class="record-item"
          @click="handleRecordClick(record)"
        >
          <div class="record-header">
            <div class="record-title">
              <span class="plate-number">{{ record.plateNumber }}</span>
              <span :class="['status-badge', record.status]">{{ getStatusText(record.status) }}</span>
            </div>
            <div class="record-time">{{ record.weighingTime }}</div>
          </div>
          
          <div class="record-details">
            <div class="detail-row">
              <span class="label">货物名称：</span>
              <span class="value">{{ record.goodsName }}</span>
            </div>
            <div class="detail-row">
              <span class="label">毛重：</span>
              <span class="value">{{ record.grossWeight }}kg</span>
            </div>
            <div class="detail-row">
              <span class="label">皮重：</span>
              <span class="value">{{ record.tareWeight }}kg</span>
            </div>
            <div class="detail-row">
              <span class="label">净重：</span>
              <span class="value weight-highlight">{{ record.netWeight }}kg</span>
            </div>
          </div>
          
          <div class="record-footer">
            <span class="weighing-id">磅单号：{{ record.weighingId }}</span>
            <van-icon name="arrow" size="14" color="#c8c9cc" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchKeyword = ref('')
const loading = ref(false)
const hasSearched = ref(false)

// 模拟磅单查询结果数据
const weighingRecords = ref([])

// 全部模拟数据
const allWeighingData = [
  {
    id: 1,
    plateNumber: '蒙A12345',
    status: 'completed',
    weighingTime: '2024-01-15 14:30',
    goodsName: '水泥',
    grossWeight: 4500,
    tareWeight: 1200,
    netWeight: 3300,
    weighingId: 'PD20240115001'
  },
  {
    id: 2,
    plateNumber: '蒙A67890',
    status: 'completed',
    weighingTime: '2024-01-15 09:15',
    goodsName: '钢筋',
    grossWeight: 5200,
    tareWeight: 1800,
    netWeight: 3400,
    weighingId: 'PD20240115002'
  },
  {
    id: 3,
    plateNumber: '蒙A98765',
    status: 'pending',
    weighingTime: '2024-01-15 16:45',
    goodsName: '砂石',
    grossWeight: 3800,
    tareWeight: 1000,
    netWeight: 2800,
    weighingId: 'PD20240115003'
  }
]

// 返回上一页
const goBack = () => {
  router.back()
}

// 搜索处理
const handleSearch = async () => {
  if (!searchKeyword.value.trim()) {
    showToast('请输入车号')
    return
  }
  
  loading.value = true
  hasSearched.value = true
  
  try {
    // 模拟搜索延迟
    await new Promise(resolve => setTimeout(resolve, 800))
    
    // 根据车号筛选数据
    const results = allWeighingData.filter(record => 
      record.plateNumber.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
    
    weighingRecords.value = results
    
    if (results.length === 0) {
      showToast('未找到相关记录')
    } else {
      showToast(`找到 ${results.length} 条记录`)
    }
    
  } catch (error) {
    showToast('查询失败，请重试')
  } finally {
    loading.value = false
  }
}

// 清空搜索
const handleClear = () => {
  searchKeyword.value = ''
  weighingRecords.value = []
  hasSearched.value = false
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    completed: '已完成',
    pending: '进行中'
  }
  return statusMap[status] || '未知'
}

// 点击记录项
const handleRecordClick = (record) => {
  showToast(`查看磅单详情：${record.weighingId}`)
}
</script>

<style scoped>
/* 全局样式优化 */
.weighing-inquiry {
  background: linear-gradient(180deg, #f8faff 0%, #f0f4ff 100%);
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px 16px;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f4f8 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  position: relative;
  flex-shrink: 0;
}

.nav-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 0 0;
  letter-spacing: 0.5px;
  flex: 1;
  text-align: center;
}

.nav-header .van-icon {
  color: #2c3e50;
  cursor: pointer;
  padding: 4px;
  transition: all 0.3s ease;
}

.nav-header .van-icon:hover {
  color: #667eea;
}

.placeholder {
  width: 28px;
  height: 28px;
}

/* 搜索区域 */
.search-section {
  padding: 16px 16px 20px 16px;
  flex-shrink: 0;
}

.search-input {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(102, 126, 234, 0.08);
}

.search-input .van-search__content {
  background: white;
  border-radius: 12px;
}

.search-input .van-field__control {
  color: #2c3e50;
  font-size: 15px;
}

.search-input .van-field__control::placeholder {
  color: #c8c9cc;
}

/* 结果容器 */
.results-container {
  flex: 1;
  padding: 0 16px 20px 16px;
  overflow-y: auto;
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}

.empty-state p {
  margin: 16px 0 0 0;
  font-size: 16px;
  color: #8f9bb3;
}

/* 无结果状态 */
.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.no-results p {
  margin: 16px 0 0 0;
  font-size: 16px;
  color: #8f9bb3;
}

.no-results .tip {
  margin: 8px 0 0 0;
  font-size: 14px;
  color: #c8c9cc;
}

/* 结果列表 */
.results-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.record-item {
  background: white;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(102, 126, 234, 0.08);
  position: relative;
  overflow: hidden;
}

.record-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.02), rgba(118, 75, 162, 0.02));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.record-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-color: rgba(102, 126, 234, 0.15);
}

.record-item:hover::before {
  opacity: 1;
}

.record-item:active {
  transform: translateY(0) scale(0.98);
}

/* 记录头部 */
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 0 12px 0;
  position: relative;
  z-index: 1;
}

.record-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.plate-number {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.3;
}

.status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  width: fit-content;
}

.status-badge.completed {
  background: rgba(76, 175, 80, 0.15);
  color: #388e3c;
}

.status-badge.pending {
  background: rgba(255, 193, 7, 0.15);
  color: #f57c00;
}

.record-time {
  font-size: 14px;
  color: #667eea;
  font-weight: 500;
  white-space: nowrap;
  margin: 0 0 0 12px;
}

/* 记录详情 */
.record-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px 0;
  position: relative;
  z-index: 1;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-row .label {
  font-size: 13px;
  color: #8f9bb3;
  min-width: 68px;
  flex-shrink: 0;
}

.detail-row .value {
  font-size: 13px;
  color: #2c3e50;
  font-weight: 500;
}

.weight-highlight {
  color: #667eea !important;
  font-weight: 600 !important;
}

/* 记录底部 */
.record-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 0 0;
  border-top: 1px solid rgba(102, 126, 234, 0.08);
  position: relative;
  z-index: 1;
}

.weighing-id {
  font-size: 12px;
  color: #c8c9cc;
}

/* 响应式优化 */
@media screen and (max-width: 375px) {
  .nav-header h2 {
    font-size: 16px;
  }
  
  .results-container {
    padding: 0 12px 16px 12px;
  }
  
  .record-item {
    padding: 14px;
  }
  
  .plate-number {
    font-size: 15px;
  }
  
  .detail-row .label {
    min-width: 64px;
    font-size: 12px;
  }
  
  .detail-row .value {
    font-size: 12px;
  }
}

/* 加载动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.record-item {
  animation: fadeInUp 0.4s ease forwards;
}

.record-item:nth-child(1) { animation-delay: 0.1s; }
.record-item:nth-child(2) { animation-delay: 0.2s; }
.record-item:nth-child(3) { animation-delay: 0.3s; }

.search-section {
  animation: fadeInUp 0.6s ease forwards;
}
</style>